فرض کنید می خواهیم دو جدول را در یک سطر قرار دهیم. اگر بخواهیم دو تگ جدول را پشت سر هم استفاده کنیم، جدول دوم در سطر بعدی و زیر جدول اول قرار می گیرد.

 

برای حل این مشکل در  طراحی وب سایت  می توانید دو جدول مورد نظر را در یک جدول که آنها را در بر می گیرد قرار دهیم. در این صورت می توان دو جدول در یک سطر ایجاد کرد.

 

در اینجا می توانید کدی را که یک جدول را درون یک جدول دیگر ایجاد می کند:

 

<table width="500" border="4"><!-- تگ آغازی جدول بیرونی -->

<td align="center"><!-- سلول اول در جدول بیرونی -->

<table width="400" border="2"><!-- آغاز جدول درونی -->

<td align="center"><!-- اولین سلول جدول درونی -->

محتویات جدول درونی

</td><!-- پایان سلول جدول درونی -->

</table><!-- پایان جدول درونی -->

</td><!-- پایان سلول جدول بیرونی -->

</table><!-- پایان جدول بیرونی -->

این هم جدول به دست آمده:

 

محتویات جدول درونی  طراحی وب سایت 

به یاد داشته باشید که جدولهای درونی را باید در سلولهای جدول بیرونی قرار دهید یعنی بین <td> و <td/> در جدول بیرونی.

 

حالا فرض کنید می خواهیم بیش از یک جدول درون یک جدول ایجاد کنیم. برای اینکه این جدولهای درونی، در یک سطر قرار گیرد کافی است به تعداد جدولهای درونی، در جدول بیرونی سلول ایجاد کنیم و جدولها را در سلولهای جدول بیرونی  طراحی وب سایت  قرار دهیم.

برای مثال فرض کنید می خواهیم دو جدول را در یک سطر داشته باشیم. می توانیم مانند زیر عمل کنیم:

 

<table width="600" border="4"><!-- تگ آغازی جدول بیرونی -->

<td align="center"><!-- سلول اول در جدول بیرونی -->

<table width="250" border="2"><!-- آغاز جدول درونی -->

<td align="center"><!-- اولین سلول جدول درونی -->

محتویات اولین جدول درونی

</td><!-- پایان سلول اولین جدول درونی -->

</table><!-- پایان اولین جدول درونی -->

</td><!-- پایان اولین سلول جدول بیرونی  -->

<td align="center"><!-- آغاز دومین سلول جدول بیرونی  -->

<table width="250" border="2"><!-- آغاز دومین جدول درونی -->

<td align="center"><!-- آغاز سلول دومین جدول درونی -->

محتویات دومین جدول درونی

</td><!-- پایان سلول دومین جدول درونی -->

</table><!-- پایان دومین جدول درونی -->

</td><!-- پایان دومین سلول جدول بیرونی -->

</table><!-- پایان جدول بیرونی -->

این هم نتیجه به دست آمده:

 

محتویات اولین جدول درونی

محتویات دومین جدول درونی

قابل ذکر است که ما در این مثالها برای بهتر مشخص شدن محل جدولها از شناسه border استفاده کرده ایم. شما می توانید به دلخواه از آن استفاده کنید.

 

بهتر است در هنگام نوشتن کدها عرض جدولها  طراحی وب سایت  را مشخص کنید تا در پایان به هم ریخته نباشند.

 

با این روش می توانید هر تعداد جدول که نیاز داشته باشید در کنار هم قرار دهید.

 

 

مزاياي طراحي با div نسبت به table

دسته بندي : آموزش html، طراحی وب سایت ، اخبار اينترنت

حتما شنيديد که خيلي جاها توصيه ميشه که براي Layout صفحه بجاي Table از Div استفاده کنيد. اما چرا؟

وظيفه اصلي تگ div در واقع چيدمان صفحه و  طراحی وب سایت  قالب صفحه است و به همين دليل است که نسبت به table فوق العاده انعطاف پذيرتر است. شما براحتي مي توانيد يک div را در هر مکاني از صفحه در کوتاهترين زمان قرار بدهيد. حالا به اين انعطاف پذيري قابليت حرکت ( انتقال ) را که با کمک تکنولوژي آژاکس اضافه شده نيز بي افزاييد.

 

از طرف ديگر، div کد کمتر و بهينه تري (<div> </div>) نسبت به يک table (که معادل <table><tr><td></td></tr></table>) ايجاد مي کند. که اين هم باعث کاهش حجم صفحه توليدي مي شود و هم باعث لود شدن سريعتر صفحه .

 

نکته ديگري که وجود دارد آن است که crawler ها که وظيفه جستجوي و ذخيره کردن صفحات را براي موتورهاي جستجو ( مثلگوگل ) بعهده دارند. چون بصورت معنايي صفحات را crawl مي کنند بنابراين اگر صفحه شما بهتر و معنايي تر ايجاد شده باشد ، ازPage rank بالاتري هم برخوردار خواهد بود. مشکل Crawler ها در ايجاد ارتباط بين مطالب داخل تيبل است. زمانيکه شما مطالب مرتبط با يک موضوع را در بخش هاي مختلف يک تيبل قرار ميديد Crawler ها در نحوه ارتباط اين بخش ها با هم و همچنين نحوه ارتباطشون با مطلب اصلي دچار سردرگمي ميشن.

نکته ديگري که يک div را در قالب بندي دردرجه بالاتري قرار مي دهد، انعطاف پذيري آن در CSS هاست. به اين معني که شما مي توانيد يک قالب چندين منظوره ايجاد کنيد و بعد با تغيير مکان div ها که با css انجام مي دهيد . کل قالب صفحه تغيير شکل پيدا مي کند.

 

حالا با اين همه برتري div نسبت به table ممکن است براي شما اين سوال ايجاد شود که table براي چه مواردي بايد استفاده شود. طراحان html همانطور که div را براي قالب بندي وقرار دادن متن و تصوير طراحی وب سایت  پياده سازي کردند. table را هم براي ايجاد صفحات به شکل Tab و ايجاد جداول ( ليست هاي موجود در صفحه) بوجود آوردند. در اکثر مواقع توصيه مي شود که براي پياده سازي Tab ها از table استفاده کنيد. همانطور که مسلما خود شما هم متوجه شديد با استفاده از يک table براحتي مي توان يک tab را پياده سازي کرد. درصورتي که اگر بخواهيد همان tab را با div پياده سازي کنيد بايد زمان و انرژي بيشتري صرف کنيد.

 

در کل با توجه به اين نکات کليدي طراحی وب سایت  :

 

    حجم کمتر صفحه توليد شده

    Page rank بالاتر در گوگل و ساير search engine ها

    قالب انعطاف پذيرتر

    براي قراردادن متن و تصوير در وب توصيه شده که از div استفاده شود

    کنترل بيشتر بوسيله css

    جدول صرفا براي ساختار tabي مناسب است

    کنترل و حرکت توسط آژاکس

    …

 

به شما اکيدا توصيه مي کنم که بجاي استفاده از table در قالب بندي صفحات از div استفاده کنيد و از قدرت آن لذت ببريد.

 

 

 

 

....

 

 

 

آموزش ساخت  طراحی وب سایت با Dreamweaver CS4

 

آموزش ساخت طراحی وب سایت  اDreamweaver CS4

 

عنوان اصلي : Creating First Web Site In Dreamweaver CS4

آموزش طراحي سايت هاي بسيار زيبا اما ساده در نرم افزار Adobe Dreamweaver CS4 به مدت زمان 2 ساعت و 40 دقيقه در آموزش مالتي مديا محصول موسسه آموزشي Lynda ارائه شده بر روي 1 حلقه CD به همراه فايل هاي تمريني

اين آموزش پروسه طراحي يك سايت را در نرم افزار دريم ويور CS4 به شما مي آموزد از ساختن يك صفحه ساده HTML تا استايل گذاري بر روي آن بوسيله CSS و همچنين نحوه ساخت انواع فرم ها به عنوان مثال فرم تماس با ما .

اين مجموعه آموزش بهترين مجموعه آموزش براي شروع آموختن طراحي وب است .

 

در ادامه با برخي از سرفصل هاي درسي اين مجموعه آموزش Dreamweaver CS4 آشنا مي شويم :

آشنايي با مدرس مجموعه و سرفصل هاي اين كورس آموزشي از زبان مدرس شامل 3 درس

آموزش مفاهيم اوليه وب و وب سايت ها شامل 3 درس

آموزش ساخت صفحات  طراحی وب سایت  در دريم ويور شامل 5 درس

آموزش اعمال CSS ها براي سبك بندي صفحات وب در Adobe Dreamweaver CS4 شامل 4 درس

آموزش پيشرفته CSS ها در Dreamweaver CS4 شامل 5 درس

آموزش ذخيره و استفاده از قالب ها در Dreamweaver CS4 شامل 1 درس

آموزش وارد كردن تصاوير در صفحات وب شامل 2 درس

آموزش ساخت Photo Gallery و كاربرد فايل هاي فلش در صفحات وب شامل 3 درس

آموزش ساخت فرم تماس وب سايت در Dreamweaver CS4 شامل 2 درس

آموزش تست كردن نهايي براي رفع ايرادات آن و در نهايت آموزش كامل قرار دادن يك وب سايت بر روي اينترنت شامل 3 درس

و چندين و چند آموزش كاربردي ديگر مانند آموزش آماده سازي طراحی وب سایت  براي موتورهاي جستجو ، استفاده از FTP و بسياري موارد ديگر

مشخصات اين مجموعه :

زبان آموزش ها انگليسي روان و ساده

داراي آموزش هاي مالتي مديا و دسته بندي شده

ارائه شده بر روي 1 حلقه CD به همراه فايل هاي تمريني

مدت زمان آموزش 2 ساعت و 40 دقيقه !

محصول موسسه آموزش آموزشي ليندا

 

فروشنده: فروشگاه تخصصي شركت فرين

 

قيمت: 3,000 تومان

 

درصد :40

 

روش خريد: براي خريد آموزش ساخت  طراحی وب سایت  با Dreamweaver CS4 ، پس از كليك روي دكمه زير و تكميل فرم سفارش، ابتدا محصول يا محصولات مورد نظرتان را درب منزل يا محل كار تحويل بگيريد، سپس وجه كالا و هزينه ارسال را به مامور پست بپردازيد. جهت مشاهده فرم خريد، روي دكمه زير كليك كنيد.